<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../Teachercentre/favicon.ico" rel="shortcut icon">
    <title>拉勾教育 - 拉勾旗下教育平台</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="homepage.js"></script>
    <script src="banner.js"></script>
</head>

<body>
    <!-- 固定logo火箭平滑滚动 -->
    <a href="javascript:;" id="return_top" title="回到顶部"></a>
    <div>
        <div class="wrapper">
            <div class="logging">
                <div class="loginpic1">
                    <div class="closediv"> <span class="closebtn">×</span></div>
                    <div class="title">拉勾教育</div>
                    <div class="desc">互联网实战大学</div>
                    <div class="item">
                        <div class="active">
                            <li class="txt">账户登录</li>
                        </div>
                        <div>
                            <li class="txt">注册</li>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div style="display:block;text-align: center;">
                        <input type="text" id="username" placeholder="请输入账号" contenteditable="off">
                        <input type="password" id="password" placeholder="请输入密码">
                        <br/>
                        <span> 
                        <label class="left1">
                            <input type="checkbox" id="remember">
                            记住密码
                        </label>
                        <label class="right55">
                            <input type="checkbox" id="check1" >
                            七天免登录
                        </label>
                        </span>
                        <p id="error" class="p1"></p>
                        <input type="submit" id="submit" value="登录">
                        <ul class="loginfoot">
                            <li><img src="./img/wechatlogo.png" alt=""></li>&nbsp&nbsp
                            <li class="zi">微信扫码登录</li>
                        </ul>
                    </div>

                    <div style="text-align: center;">
                        <p class="p1">用户名</p>
                        <input type="text" placeholder="请输入账号" id="username1">
                        <p class="p1">密码</p>
                        <input type="text" placeholder="请输入密码" id="password1"> <br>
                        <p class="p1">身份</p> <br> 教师 <input type="radio" id="teacher" name="role">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp学生 <input type="radio" id="student" name="role">

                        <br/>
                        <p id="error1" class="p1"></p>
                        <input type="submit" id="register1" value="注册">
                    </div>
                </div>
            </div>
        </div>
        <script>
            //记住用户名
            var username = document.querySelector('#username');
            var password = document.querySelector('#password');
            var remember = document.querySelector('#remember');
            if (localStorage.getItem('username')) {
                username.value = localStorage.getItem('username');
                remember.checked = true;

            }
            if (localStorage.getItem('password')) {
                password.value = localStorage.getItem('password');
                remember.checked = true;

            }
            remember.addEventListener('change', function() {
                if (this.checked) {
                    localStorage.setItem('username', username.value);
                    localStorage.setItem('password', password.value);
                } else {
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                }
            })
        </script>
        <!-- 整个页面大盒子 -->
        <!-- 登录注册 -->
        <div class="web">
            <!-- 导航栏 -->
            <div class="wrap">
                <div class="wrap-content">
                    <div class="wrap-content-left">
                        <div class="logo"><img src="img/logo.png" alt="" width="40px" height="40px"></div>
                        <div class="title-1">拉勾教育</div>
                        <div class="title-2">互联网人实战大学</div>
                    </div>
                    <div class="search">
                        <input type="text" class="search-input" placeholder="请输入搜索内容">
                        <div class="to_search"></div>
                        <ul class="search-content search-content-scroll">

                        </ul>
                    </div>
                    <!-- 导航栏分项 -->
                    <div class="wrap-content-right">
                        <ul class="tab-list">
                            <li class="sec1">
                                <a href="../Homepage/index1.html">选课</a>
                            </li>
                            <li class="sec" id="teachercentre" style="display: none;"> <a href="../Teachercentre/teachercentre.html">教师中心</a></li>
                            <li class="sec">
                                <a href="../Studyspace/studyspace.html">学习</a>
                            </li>
                            <li class="sec"><a href="../Questioncentre/questioncentre.html">师生问答</a></li>
                        </ul>
                        <!-- 登陆/注册 -->
                        <div class="login">
                            <div class="sign-up" id="loginbtn1">登陆</div>
                            <div class="register" id="loginbtn2">注册</div>
                            <div class="dropdown">
                                <div class="dropdown-icon"></div>
                                <button class="dropbtn" id="userinfo"></button>
                                <div class="dropdown-content">
                                    <a href="#">我的收藏夹</a>
                                    <a href="../Setuserinfo/setuserinfo.html" id="setuser">账户设置及充值</a>
                                    <a href="#" id="out-login">退出登录</a>
                                </div>
                            </div>
                            <div class="pic" id="loginbtn3"><img src="img/register.png" alt=""><span class="rolelogo">游客</span></div>
                            <div class="pic" id="rlogo"><img src="img/register.png" alt=""><span class="rolelogo" id="rolelogo"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 整个网页内容 -->
            <div class="container-pc">
                <!-- 主要内容 -->
                <div class="page-pc">
                    <!-- 轮播图框架 -->
                    <div class="course-wrap">
                        <!-- 轮播图显示窗口 -->
                        <div class="focus">
                            <div class="arrow-l">
                                <span class='arrow-l-icon'></span>
                            </div>
                            <div class="arrow-r">
                                <span class='arrow-r-icon'></span>
                            </div>
                            <ul class="list">
                                <ul class='list-one'>
                                    <li>
                                        <div class="focus-first-box">
                                            <div class="title"></div>
                                            <div class="brief"></div>
                                            <div class="desc-box">
                                                <div class="desc"></div>
                                                <div class="desc"></div>
                                                <div class="desc"></div>
                                                <div class="desc"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="focus-box">
                                            <div class="focus-box-main">
                                                <div class="box-title"></div>
                                                <div class="box-brief"></div>
                                            </div>
                                            <div class="focus-box-main">
                                                <div class="box-title"></div>
                                                <div class="box-brief"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!-- <li>
                                    <div class="focus-first-box">
                                        <div class="title"></div>
                                        <div class="brief"></div>
                                        <div class="desc-box">
                                            <div class="desc"></div>
                                            <div class="desc"></div>
                                            <div class="desc"></div>
                                            <div class="desc"></div>
                                        </div>
                                    </div>
                                </li> -->
                                <!-- <li>
                                    <div class="focus-box">
                                        <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                        </div>
                                        <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                    </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li>
                                <li>
                                   <div class="focus-box focus-box-transter">
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                       <div class="focus-box-main">
                                           <div class="box-title"></div>
                                           <div class="box-brief"></div>
                                       </div>
                                   </div>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <!-- 公开课 -->
                    <div class="public-course">
                        <div class="data-box">
                            <div class="public-title">公开课</div>
                            <div class="public-more">
                                <span class="arrow-more"><a href='https://kaiwu.lagou.com/public-course/main.html#/publicListPc' target="_blank">更多</a></span>
                                <!-- <script>
                               var more= document.querySelector('.arrow-more');
                               more.onclick=function() {
                                location.assign('https://kaiwu.lagou.com/public-course/main.html#/publicListPc');
                               }
                           </script> -->
                            </div>
                        </div>

                        <ul class="course-list">
                            <li class="course-inner">
                                <div class="context">
                                    <!-- 图片 -->
                                    <div class="cover">
                                        <div class="cover-num">
                                            <span class='cover-num-pic'><img src="img/cover-pic.png" alt=""></span>
                                            <span class='cover-number'>123已预约</span>
                                        </div>
                                        <img src="https://s0.lgstatic.com/i/image6/M00/4D/7D/CioPOWDu14aALLckAACyZt2z9oQ82.jpeg" alt=""></div>
                                    <!-- 文字 -->
                                    <div class="course-name">
                                        <p style="font-size: 16px;
                             font-family: PingFangSC-Medium,PingFang SC;
                             font-weight: 500;
                             color: #333;
                             line-height: 22px;">
                                            2年Java挑战30k Offer,面渣还是面霸
                                        </p>
                                        <p style="font-size: 12px;
                             font-family: PingFangSC-Regular,PingFang SC;
                             font-weight: 400;
                             color: #666;
                             line-height: 17px;
                             margin-top: 8px;
                         ">2年Java挑战30k Offer,面渣还是面霸</p>
                                    </div>
                                </div>
                                <div class="status">
                                    <div class="remind">
                                        <div><img src="img/time.png" alt=""></div>
                                        <div>今日2:00开播</div>
                                    </div>
                                    <div class="reserve">预约提醒</div>
                                </div>
                            </li>
                            <li class="course-inner">
                                <div class="context">
                                    <div class="cover">
                                        <div class="cover-num">
                                            <span class='cover-num-pic'><img src="img/cover-pic.png" alt=""></span>
                                            <span class='cover-number'>123已预约</span>
                                        </div>
                                        <img src="https://s0.lgstatic.com/i/image6/M00/4E/0D/CioPOWDxakiAQ0WLAACx8Ssla4I85.jpeg" alt=""></div>
                                    <div class="course-name">
                                        <p style="font-size: 16px;
                            font-family: PingFangSC-Medium,PingFang SC;
                            font-weight: 500;
                            color: #333;
                            line-height: 22px;">

                                            深入理解 JS 异步编程

                                        </p>
                                        <p style="font-size: 12px;
                            font-family: PingFangSC-Regular,PingFang SC;
                            font-weight: 400;
                            color: #666;
                            line-height: 17px;
                            margin-top: 8px;
                        ">
                                            异步编程方案全解读！
                                        </p>
                                    </div>
                                </div>
                                <div class="status">
                                    <div class="remind">
                                        <div><img src="img/time.png" alt=""></div>
                                        <div>今日2:00开播</div>
                                    </div>
                                    <div class="reserve">预约提醒</div>
                                </div>
                            </li>
                            <li class="course-inner">
                                <div class="context">
                                    <div class="cover">
                                        <div class="cover-num">
                                            <span class='cover-num-pic'><img src="img/cover-pic.png" alt=""></span>
                                            <span class='cover-number'>123已预约</span>
                                        </div>
                                        <img src="https://s0.lgstatic.com/i/image6/M01/4E/0E/CioPOWDxbOGAB1-OAAKVo7CkLKM427.png" alt=""></div>
                                    <div class="course-name">
                                        <p style="font-size: 16px;
                            font-family: PingFangSC-Medium,PingFang SC;
                            font-weight: 500;
                            color: #333;
                            line-height: 22px;">
                                            职业规划专家解读

                                        </p>
                                        <p style="font-size: 12px;
                            font-family: PingFangSC-Regular,PingFang SC;
                            font-weight: 400;
                            color: #666;
                            line-height: 17px;
                            margin-top: 8px;
                        ">
                                            通过科学评测带你找到求职最优路径
                                        </p>
                                    </div>
                                </div>
                                <div class="status">
                                    <div class="remind">
                                        <div><img src="img/time.png" alt=""></div>
                                        <div>今日2:00开播</div>
                                    </div>
                                    <div class="reserve">预约提醒</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 限时秒杀模块 -->
                    <div class="wrap-1">
                        <div class="seconds">
                            <div class="seconds-name"><img src="https://s21.lgstatic.com/growth/activity/20210118/1610963032756.png" alt=""></div>
                            <div class="seconds-logo"><img src="https://s21.lgstatic.com/growth/activity/20201228/1609163449422.png" alt=""></div>
                            <div class="seconds-list">
                                <div class="seconds-list-box">
                                    <div class="seconds-img"><img src="https://s0.lgstatic.com/i/image6/M00/4E/A3/CioPOWD1V-eAAw9xAAEUFSoBWso194.png" alt=""></div>
                                    <div class="seconds-introduce">
                                        <p class="title-one">
                                            经常出现OOM，还不重视JVM内存调优？
                                        </p>
                                        <p class="title-two">
                                            胡书敏&nbsp;&nbsp;著名外企和互联网公司技术面试官
                                        </p>
                                        <p class="title-three">
                                            1522人已抢
                                        </p>
                                        <div class="price">
                                            <div class="total-price">
                                                <span class="price-money">￥</span>
                                                <span class="price-num">1</span>
                                                <span class="price-money-del"><del>￥</del></span>
                                            </div>
                                            <div class="price-btn">
                                                <div class="price-time"></div>
                                                <div class="price-button">立即抢</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="seconds-list-box">
                                    <div class="seconds-img"><img src="https://s0.lgstatic.com/i/image/M00/5D/09/Ciqc1F-D0-OAZTxlAABYS9gye8s357.png" alt=""></div>
                                    <div class="seconds-introduce">
                                        <p class="title-one">

                                            深入浅出搞定 React

                                        </p>
                                        <p class="title-two">

                                            修言&nbsp;&nbsp;高级前端工程师

                                        </p>
                                        <p class="title-three">

                                            1.35w人已抢

                                        </p>
                                        <div class="price">
                                            <div class="total-price">
                                                <span class="price-money">￥</span>
                                                <span class="price-num">1</span>
                                                <span class="price-money-del"><del>￥</del></span>
                                            </div>
                                            <div class="price-btn">
                                                <div class="price-time"></div>
                                                <div class="price-button">立即抢</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="seconds-list-box">
                                    <div class="seconds-img"><img src="https://s0.lgstatic.com/i/image/M00/94/1D/Ciqc1GAXbriAGqn3AAEgx3qPrKo991.png" alt=""></div>
                                    <div class="seconds-introduce">
                                        <p class="title-one">

                                            前端性能优化方法与实战

                                        </p>
                                        <p class="title-two">
                                            溪风&nbsp;&nbsp;前58集团技术副总监
                                        </p>
                                        <p class="title-three">

                                            1.03w人已抢

                                        </p>
                                        <div class="price">
                                            <div class="total-price">
                                                <span class="price-money">￥</span>
                                                <span class="price-num">1</span>
                                                <span class="price-money-del"><del>￥</del></span>
                                            </div>
                                            <div class="price-btn">
                                                <div class="price-time"></div>
                                                <div class="price-button">立即抢</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="seconds-list-box">
                                    <div class="seconds-img"><img src="https://s0.lgstatic.com/i/image/M00/5B/A5/CgqCHl9_zreAJNqUAADuMWEj8nA344.png" alt=""></div>
                                    <div class="seconds-introduce">
                                        <p class="title-one">

                                            Flutter快学快用24讲

                                        </p>
                                        <p class="title-two">

                                            清弦 &nbsp;&nbsp;高级前端开发工程师，跨端平台研发团队负责人

                                        </p>
                                        <p class="title-three">

                                            1.8w人已抢

                                        </p>
                                        <div class="price">
                                            <div class="total-price">
                                                <span class="price-money">￥</span>
                                                <span class="price-num">1</span>
                                                <span class="price-money-del"><del>￥</del></span>
                                            </div>
                                            <div class="price-btn">
                                                <div class="price-time"></div>
                                                <div class="price-button">立即抢</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <script>
                            var price_time = document.querySelectorAll('.price-time');
                            var inputTime = +new Date('2021-8-18 24:00:00'); //用户输入的时间
                            countDown(); //先调用这个函数 防止刷新页面有空白
                            //开启定时器
                            setInterval(countDown, 1000);
                            //每隔1s调用一次函数
                            function countDown() {
                                var nowTime = +new Date();
                                var times = (inputTime - nowTime) / 1000; // 转化为秒
                                var h = parseInt(times / 60 / 60 % 60);
                                h = h < 10 ? '0' + h : h;
                                // hour.innerHTML = h; //剩余时间给小时
                                var m = parseInt(times / 60 % 60);
                                m = m < 10 ? '0' + m : m;
                                // minute.innerHTML = m; //剩余时间给分钟    
                                var s = parseInt(times % 60);
                                s = s < 10 ? '0' + s : s;
                                // second.innerHTML = s; //剩余时间给秒
                                for (var i = 0; i < price_time.length; i++) {
                                    price_time[i].innerHTML = h + ':' + m + ':' + s;
                                }


                            }
                        </script>
                    </div>
                    <!-- 八点一刻模块 -->
                    <div class="eight-course">
                        <div class="data-box">
                            <div class="public-title">8点一刻</div>
                            <div class="public-more">
                                <div class="arrow-icon" id="arrow-icon"></div>
                                <div class="arrow-spread" onclick='arrowUp()'>展开</div>
                                <div class="arrow-shrink" style="display: none;" onclick='arrowDown()'>收起</div>
                                <script>
                                    //展开箭头向下
                                    function arrowUp() {
                                        document.getElementById("arrow-icon").style.transform = 'rotate(45deg)';
                                    }
                                    //收起箭头向上
                                    function arrowDown() {
                                        document.getElementById("arrow-icon").style.transform = 'rotate(225deg)';
                                    }
                                </script>

                            </div>

                        </div>
                        <div class="eight-course-list">
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M00/4E/63/CioPOWD0HPiACNmBAAKeQ5ukIms408.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">
                                        抓包利器 Charles 实操指南
                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            2590人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M00/4D/C4/CioPOWDwFcuAW3QDAALvMzP0ZOs123.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        从“弹窗乱象”看如何打造纯净的用户体验？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            899人购买
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4D/5D/Cgp9HWDuloGAOYikAALFeOR7g6o232.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        如何定位 Java 的 CPU 性能问题

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            2799人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="eight-course-list1" style="height:0.001px;">
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/46/D6/Cgp9HWDMbS2AFZUkAACjhL47-gs73.jpeg" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">


                                        大厂面试直通卡


                                    </p>
                                    <p class="eight-course-title-2">

                                        开放 Java、Web前端、数据分析、大数据四类岗位

                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="course-tag">限时特惠</span>
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">98</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="eight-course-list3">
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4F/37/CioPOWD4C_6ASMeNAALJqFQauxY589.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        初探如何在团队中进行微前端改造？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            2590人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M00/4D/C4/CioPOWDwFcuAW3QDAALvMzP0ZOs123.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        从“弹窗乱象”看如何打造纯净的用户体验？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            899人购买
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/19/CioPOWDn5ASAC9MQAAKPfA-A4VQ381.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        ROI 最大化：保姆级投放实操指南


                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            2799人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="eight-course-list2" style="height: 0.001px;">
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4B/38/Cgp9HWDkLSGAFqJJAAC1xu5ERLY463.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        如何使用模块联邦落地微前端

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="eight-lesson">
                                <div class="eight-course-pic">
                                    <img src="https://s0.lgstatic.com/i/image6/M01/4C/88/Cgp9HWDq4EKARs27AALJTHUHomI362.png" alt="">
                                </div>
                                <div class="eight-course-title">
                                    <p class="eight-course-title-1">

                                        Kafka 是如何做到消息不丢失或不重复的？

                                    </p>
                                    <p class="eight-course-title-2">
                                        8点一课 | 每天进步一点点
                                    </p>
                                    <div class="eight-price">
                                        <div class="eight-price-show">
                                            <span class="money-logo-8">￥</span>
                                            <span class="money-num-8">1</span>
                                        </div>
                                        <div class="eight-num-show">
                                            3332人购买
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="wrap-2 ">
                            <div class="special ">
                                专栏
                            </div>
                            <!-- 专栏页切换对应按钮 -->
                            <div class="react-btn ">
                                <ul>
                                    <li class="opt opt-current">

                                        全部
                                    </li>
                                    <li class="opt ">

                                        后端&构架
                                    </li>
                                    <li class="opt ">

                                        前端&移动
                                    </li>
                                    <li class="opt ">

                                        数据分析
                                    </li>
                                    <li class="opt ">

                                        产品&分析
                                    </li>
                                    <li class="opt ">

                                        市场&运营
                                    </li>
                                    <li class="opt ">

                                        大数据&AI
                                    </li>
                                    <li class="opt ">
                                        测试&运维
                                    </li>
                                    <li class="opt ">

                                        职场&管理
                                    </li>
                                    <li class="opt ">

                                        学生&入门
                                    </li>
                                    <li class="opt ">

                                        预约课程
                                    </li>
                                </ul>
                            </div>
                            <!-- 专栏切换页面 -->
                            <div class="detail-page ">
                                <!-- 模板1/小橙框+日期+预约提醒 -->
                                <div class="detail-box ">
                                    <div class="detail-pic ">
                                        <img src="https://s0.lgstatic.com/i/image6/M01/4E/9C/CioPOWD1QMGAWkIbAAEc5liD9xo474.png " alt=" ">
                                    </div>
                                    <div class="detail-message ">
                                        <p class="message-1 ">
                                            面试率 90% 的JS事件循环，看这篇就够了
                                        </p>
                                        <p class="message-2 ">

                                            8点一课 | 每天进步一点点

                                        </p>
                                        <p class="message-3 ">

                                            曾勇 一线互联网前端架构师

                                        </p>
                                        <div class="service ">
                                            <div class="booking-tip ">
                                                预约 1元 抢新课
                                            </div>
                                            <div class="booking-time ">
                                                07.21日上架
                                            </div>
                                            <div class="booking-remind ">
                                                预约提醒
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 模板1/小橙框+日期+预约提醒 -->
                                <div class="detail-box ">
                                    <div class="detail-pic ">
                                        <img src="https://s0.lgstatic.com/i/image6/M00/51/D9/CioPOWEKDfCAQlw1AAEYhUt8B0Y603.png" alt=" ">
                                    </div>
                                    <div class="detail-message ">
                                        <p class="message-1 ">

                                            并发下 MQ 如何保证订单顺序消费？

                                        </p>
                                        <p class="message-2 ">

                                            8点一课 | 每天进步一点点

                                        </p>
                                        <p class="message-3 ">

                                            曾勇 一线互联网前端架构师

                                        </p>
                                        <div class="service ">
                                            <div class="booking-tip ">
                                                预约 1元 抢新课
                                            </div>
                                            <div class="booking-time ">
                                                07.21日上架
                                            </div>
                                            <div class="booking-remind ">
                                                预约提醒
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 模板1/小橙框+日期+预约提醒 -->
                                <div class="detail-box ">
                                    <div class="detail-pic ">
                                        <img src="https://s0.lgstatic.com/i/image6/M01/4C/14/CioPOWDnzPuANhlIAAEC2N0FNm8630.png " alt=" ">
                                    </div>
                                    <div class="detail-message ">
                                        <p class="message-1 ">

                                            为啥 80% 公司的运营体系都是战五渣？

                                        </p>
                                        <p class="message-2 ">

                                            8点一课 | 每天进步一点点

                                        </p>
                                        <p class="message-3 ">

                                            拉斐尔 拉勾网数据总监

                                        </p>
                                        <div class="service ">
                                            <div class="booking-tip ">
                                                预约 1元 抢新课
                                            </div>
                                            <div class="booking-time ">
                                                07.21日上架
                                            </div>
                                            <div class="booking-remind ">
                                                预约提醒
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="detail-box " id="last-detail-box "></div> -->
                            </div>
                        </div>
                    </div>
                    <!-- 底部内容 -->
                    <div class="footer ">
                        <div class="footer-content ">
                            <div class="words-left ">
                                <p class="words-left-one ">拉勾教育</p>
                                <p class="words-left-two ">拉勾旗下专为互联网人打造的实战大学</p>
                            </div>
                            <div class="words-right ">
                                <div class="words-right-one ">
                                    <!-- 二维码 -->
                                    <div class="words-right-pic ">
                                        <img src="https://www.lgstatic.com/kw-web-fed/img/common-qrcode.abff25a.jpeg " alt=" ">
                                    </div>
                                    <!-- 文字 -->
                                    <div class="words-right-title ">
                                        <p class="words-right-title-one ">
                                            关注公众号
                                        </p>
                                        <p class="words-right-title-two ">
                                            接收第一手优惠信息
                                        </p>

                                    </div>
                                </div>
                                <div class="words-right-two ">
                                    <!-- 二维码 -->
                                    <div class="words-right-pic ">
                                        <img src="img/footer-logo.png " alt=" ">
                                    </div>
                                    <!-- 文字 -->
                                    <div class="words-right-title ">
                                        <p class="words-right-title-one ">
                                            下载APP
                                        </p>
                                        <p class="words-right-title-two ">
                                            随时随地学习
                                        </p>

                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="footer-right ">
                            ©2021 拉勾网
                            <a href="https://beian.miit.gov.cn " target="_blank ">京ICP备14023790号-2</a>
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802024043 " target="blank ">京公网安备 11010802024043</a>
                        </div>
                    </div>

                </div>
                <script>
                    var item = document.getElementsByClassName("item");
                    var it = item[0].getElementsByTagName("div");
                    var content = document.getElementsByClassName("content");
                    var con = content[0].getElementsByTagName("div");
                    for (let i = 0; i < it.length; i++) {
                        it[i].onclick = function() {
                            for (let j = 0; j < it.length; j++) {
                                it[j].className = '';
                                con[j].style.display = "none";
                            }
                            this.className = "clickli";
                            it[i].index = i;
                            con[i].style.display = "block";
                        }
                    }
                    var closebtn1 = document.querySelector('.closebtn');
                    var login = document.querySelector('.logging');
                    var link1 = document.querySelector('#loginbtn1');
                    var link2 = document.querySelector('#loginbtn2');
                    var link3 = document.querySelector('#loginbtn3');
                    var mask = document.querySelector('.wrapper');
                    link1.addEventListener('click', function() {
                        login.style.display = 'block';
                        mask.style.display = 'block';
                        setTimeout(function() {
                            login.style.opacity = 1;
                        }, .1);

                    })
                    link2.addEventListener('click', function() {
                        login.style.display = 'block';
                        mask.style.display = 'block';
                        setTimeout(function() {
                            login.style.opacity = 1;
                        }, .1);

                    })
                    link3.addEventListener('click', function() {
                        login.style.display = 'block';
                        mask.style.display = 'block';
                        setTimeout(function() {
                            login.style.opacity = 1;
                        }, .1);

                    })
                    closebtn1.addEventListener('click', function() {
                        mask.style.display = 'none';
                        login.style.opacity = 0;
                        login.style.display = 'none';
                    })
                </script>
                <!-- <script>
                    var speed = 1.1;
                    var g = document.createElement("div ");
                    g.id = "gotop ";
                    var p = document.createElement("img ");
                    p.src = "https://s21.lgstatic.com/growth/activity/20201231/1609394319550.png ";
                    document.body.appendChild(g);
                    g.appendChild(p);


                    g.οnmοusemοve = function() {
                        p.src = "https://s21.lgstatic.com/growth/activity/20201231/1609394319550.png ";
                        p.style.cursor = "pointer ";
                    }
                    g.οnmοuseοut = function() {
                            p.src = "https://s21.lgstatic.com/growth/activity/20201231/1609394520801.png ";
                        }
                        //让goto页面一加载就消失，当超过一定高度出现。
                    p.style.display = "none ";
                    //获取scrollTop的值,解决浏览器兼容性问题
                    function getScrollTop() {
                        var value = document.body.scrollTop || document.documentElement.scrollTop;
                        return value;
                    }
                    //设置scrollTop的值
                    function setScrollTop(value) {
                        document.body.scrollTop = value;
                        document.documentElement.scrollTop = value;
                    }
                    //当滑动到500的时候就出现goTop 
                    window.οnscrοll = function() {
                        if (getScrollTop() > 500) {
                            p.style.display = " ";
                        } else {
                            p.style.display = "none ";
                        }
                    }
                    g.οnclick = function() {
                        var timer = setInterval(function() {
                            setScrollTop(getScrollTop() / speed);
                            if (getScrollTop() < 1)
                                clearInterval(timer);
                        }, 10);
                    }
                </script> -->
</body>

</html>